<!doctype html>
<html class="export">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry &#xB7; Events</title>

    <link rel="stylesheet" href="css/masonry-docs.css" media="screen">

</head>
<body class="page--events" data-page="events">

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>


  <div id="content" class="content container">

      <h1>Events</h1>

    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#event-binding">Event binding</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#jquery-event-binding">jQuery event binding</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#vanilla-js-event-binding">Vanilla JS event binding</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#masonry-events">Masonry events</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layoutcomplete">layoutComplete</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#removecomplete">removeComplete</a></li>
</ul>


<div id="notification"></div>

<h2 id="event-binding">Event binding</h2>

<h3 id="jquery-event-binding">jQuery event binding</h3>

<p>Bind events with jQuery with standard jQuery event methods <code>.on()</code>, <code>.off()</code>, and <code>.one()</code>.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry({...});

<span class="function"><span class="keyword">function</span> <span class="title">onLayout</span><span class="params">()</span> </span>{
  <span class="built_in">console</span>.log(<span class="string">&apos;layout done&apos;</span>);
}
<span class="comment">// bind event listener</span>
<span class="jquery_var">$grid</span>.on( <span class="string">&apos;layoutComplete&apos;</span>, onLayout );
<span class="comment">// un-bind event listener</span>
<span class="jquery_var">$grid</span>.off( <span class="string">&apos;layoutComplete&apos;</span>, onLayout );
<span class="comment">// bind event listener to be triggered just once. note ONE not ON</span>
<span class="jquery_var">$grid</span>.one( <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="built_in">console</span>.log(<span class="string">&apos;layout done, just this one time&apos;</span>);
});
</code></pre>

<p>jQuery event listeners have an <code>event</code> argument, whereas vanilla JS listeners do not.</p>

<pre><code class="js"><span class="comment">// jQuery, has event argument</span>
<span class="jquery_var">$grid</span>.on( <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">( event, items )</span> </span>{
  <span class="built_in">console</span>.log( items.length );
});

<span class="comment">// vanilla JS, no event argument</span>
<span class="masonry_var">msnry</span>.on( <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">( items )</span> </span>{
  <span class="built_in">console</span>.log( items.length );
});
</code></pre>


<h3 id="vanilla-js-event-binding">Vanilla JS event binding</h3>

<p>Bind events with vanilla JS with <a href="methods.html#on">.on()</a>, <a href="methods.html#off">.off()</a>, and <a href="methods.html#once">.once()</a> methods.</p>

<pre><code class="js"><span class="comment">// vanilla JS</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {...});

<span class="function"><span class="keyword">function</span> <span class="title">onLayout</span><span class="params">()</span> </span>{
  <span class="built_in">console</span>.log(<span class="string">&apos;layout done&apos;</span>);
}
<span class="comment">// bind event listener</span>
<span class="masonry_var">msnry</span>.on( <span class="string">&apos;layoutComplete&apos;</span>, onLayout );
<span class="comment">// un-bind event listener</span>
<span class="masonry_var">msnry</span>.off( <span class="string">&apos;layoutComplete&apos;</span>, onLayout );
<span class="comment">// bind event listener to be triggered just once</span>
<span class="masonry_var">msnry</span>.once( <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="built_in">console</span>.log(<span class="string">&apos;layout done, just this one time&apos;</span>);
});
</code></pre>


<h2 id="masonry-events">Masonry events</h2>


<h3 id="layoutcomplete">layoutComplete</h3>

<p>Triggered after a layout and all positioning transitions have completed.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.on( <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">( event, laidOutItems )</span> </span>{...} )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.on( <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">( laidOutItems )</span> </span>{...} )
</code></pre>

<p class="variable">
  <code class="variable__code">laidOutItems</code>
  <span class="variable__type"><i>Array</i> of <i>Masonry.Item</i>s</span>
  <span class="variable__description">Items that were laid out</span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.on( <span class="string">&apos;layoutComplete&apos;</span>,
  <span class="function"><span class="keyword">function</span><span class="params">( event, laidOutItems )</span> </span>{
    <span class="built_in">console</span>.log( <span class="string">&apos;Masonry layout completed on &apos;</span> +
      laidOutItems.length + <span class="string">&apos; items&apos;</span> );
  }
);
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="layout-complete-demo">
    <p class="instruction">Resize browser or click item to toggle size</p>
    <div class="grid grid--clickable">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/yNgmNv">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/htsui">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h3 id="removecomplete">removeComplete</h3>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.on( <span class="string">&apos;removeComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">( event, removedItems )</span> </span>{...} )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.on( <span class="string">&apos;removeComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">( removedItems )</span> </span>{...} )
</code></pre>

<p>Triggered after an item element has been removed.</p>

<p class="variable">
  <code class="variable__code">removedItems</code>
  <span class="variable__type"><i>Array</i> of <i>Masonry.Item</i>s</span>
  <span class="variable__description">Items that were removed</span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.on( <span class="string">&apos;removeComplete&apos;</span>,
  <span class="function"><span class="keyword">function</span><span class="params">( event, removedItems )</span> </span>{
    notify( <span class="string">&apos;Removed &apos;</span> + removedItems.length + <span class="string">&apos; items&apos;</span> );
  }
);
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="remove-complete-demo">
    <p class="instruction">Click items to remove</p>
    <div class="grid grid--clickable">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/mJRNVV">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/JknEe">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>

  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
  
    <div class="container">
        <p class="site-footer__copy">
          Masonry is made by <a href="http://desandro.com">David DeSandro</a>.
          Make something rad with it.
        </p>
  
  
      <p class="site-footer__copy">Help improve these docs.
        <a href="https://github.com/desandro/masonry-docs/issues/">Open an issue</a> or
        <a href="https://github.com/desandro/masonry-docs/blob/master/content/events.mustache">pull request</a>.</p>
  
    </div>
  
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>

  <script src="js/masonry-docs.min.js"></script>


</body>
</html>
